<template>
	<view class="page">
		<com-search-filter placeholder="请输入姓名进行搜索" @input="searchChange"></com-search-filter>

		<view class="modules">
			<audit-list :list="items" :showOperate="false" :showMore="true" @refresh="whenRefresh"></audit-list>

			<template v-if="loadMoreStatus!=='loading'&&!items.length">
				<u-empty marginTop="10vh" width="240rpx" height="240rpx" text="暂时没有人员" textSize="28rpx" textColor="#86909C"
					icon="https://file.casugn.com/storecompcard/temp/空页面@2x(11)_1681113828976.png"></u-empty>
			</template>

			<template v-if="loadMoreStatus==='loading'">
				<u-loadmore height="100" fontSize="28rpx" iconSize="34rpx" :status="loadMoreStatus" @loadmore="scrolltolower" />
			</template>
		</view>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	import AuditList from './components/audit-list.vue'

	export default {
		components: { AuditList },

		data() {
			return {
				searchVal: '',

				items: [],
				pageNo: 1,
				pageSize: 20,
				loadMoreStatus: 'nomore', //loading / nomore / loadmore
			}
		},
		computed: {
			...mapGetters(['userInfo']),
		},
		onLoad() {
			this.loadMoreStatus = 'loading'
			this.getDBData()
		},
		onPullDownRefresh() {
			this.refresherrefresh()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			this.scrolltolower()
		},
		methods: {
			searchChange(e) {
				// console.log(e);
				this.searchVal = e
				uni.$u.throttle(this.refresherrefresh, 500)
			},
			async getDBData(type = 'refresh') {
				let params = {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					companyId: this.userInfo.companyId,
					isDel: 0,
					name: `*${this.searchVal}*`,
					column: 'name',
					order: 'asc',
				}
				let res = await this.$api.queryCardList(params)
				if (res.success) {
					let tData = res.result.records
					if (type === 'refresh') {
						this.items = tData
					}
					if (type === 'add') {
						this.items.push(...tData)
					}
					console.log('人员管理列表：', this.items);
					this.loadMoreStatus = res.result.pages > res.result.current ? 'loadmore' : 'nomore'
				} else {
					this.loadMoreStatus = 'nomore'
				}
			},
			scrolltolower() {
				if (this.loadMoreStatus === 'nomore') {
					return
				}
				this.loadMoreStatus = 'loading';
				this.pageNo += 1
				this.getDBData('add')
			},
			refresherrefresh() {
				this.items = []
				this.pageNo = 1
				this.loadMoreStatus = 'loading'
				setTimeout(async () => {
					await this.getDBData('refresh')
				}, 500)
			},
			whenRefresh(list) {
				this.items = list
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F8FA;
	}

	.page {
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tab-box {
		position: sticky;
		top: 0;
		background-color: #fff;
		z-index: 9;
	}

	.modules {
		padding: 24rpx 0 40rpx;
	}
</style>